<template>
  <div>
    <el-form :model="queryParams" ref="queryForm" :inline="true" >
      <el-form-item label="名称" prop="materialName">
        <el-input v-model="queryParams.materialName" placeholder="请输入名称或编号" clearable size="small"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="购买日期">
        <el-date-picker
          v-model="dateRange"
          size="small"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="申购人员" prop="materialName">
        <el-input v-model="queryParams.applyTeacher" placeholder="请输入姓名或工号" clearable size="small"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="类别" prop="hazardousOpt">
          <el-select v-model="queryParams.hazardousOpt" placeholder="请选择类别"  size="small">
            <el-option v-for="item in kindsOptions" :key="item.kindsId" :label="item.name" :value="item.kindsId">
          </el-option>
          </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="productCasList" >
      <el-table-column label="CAS编号"  prop="casNo" align="center" width="80"/>
      <el-table-column label="名称"  prop="materialName" :show-overflow-tooltip="true" />
       <el-table-column label="库存状态" align="center" prop="purchaseStatus" :formatter="purchaseStatusFormat" width="60"/>
      <el-table-column label="申购人员"  prop="applyTeacher" align="center" :show-overflow-tooltip="true" width="80"/>
      <el-table-column label="购买"  prop="quantity"   width="50" align="center"  />
      <el-table-column label="单位"  prop="unitOpt" :formatter="unitOptFormat" width="50" align="center"/>
      <el-table-column label="包装"  prop="packageWeight" width="50" align="center"/>
      <el-table-column label="发票号"  prop="invoiceNo"   width="120" align="center"  />
      <el-table-column label="购买日期"  prop="storageTime" align="center" width="80"/>
      <el-table-column label="库存" align="center" prop="inventoryNum" width="50"/>
      <el-table-column label="使用" align="center" prop="usedNum" width="50"/>
      <el-table-column label="用完" align="center" prop="finishedNum" width="50"/>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />
  </div>
</template>

<script>
  import {
    queryInventory
  } from "@/api/labdanger/purchaseDet.js";
  import {getAllRestrictedKinds} from "@/api/labdata/cylindersType";
  export default {
    name: "CtrlProductCas",
    components:{},
    data() {
      return {
        // 遮罩层
        loading: true,
        // 总条数
        total: 0,
        // 在用化学品表格数据
        productCasList: [],
        // 单位字典
        unitOptOptions: [],
        // 类别字典
        kindsOptions: [],
        // 日期范围
        dateRange: [],
        // 采购状态字典
        purchaseStatusOptions: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
        }
      };
    },
    props: {
      orgId: Number,
    },
    watch: {
      orgId(val) {
        this.queryParams.OrgId = val;
        this.getList();
      },
    },
    created() {
      this.getDicts("unitOpt").then(response => {
        this.unitOptOptions = response.data;
      });
      this.getDicts("purchaseStatusOpt").then(response => {
        this.purchaseStatusOptions = response.data;
      });
      this.getAllKinds();
      this.getList();
    },
    methods: {
      /** 查询在用化学品列表 */
      getList() {
        this.loading = true;
        queryInventory(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
          this.productCasList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      getAllKinds(){
        getAllRestrictedKinds().then(response => {
          this.kindsOptions = response.data;
        });
      },
      // 单位字典翻译
      unitOptFormat(row, column) {
        return this.selectDictLabel(this.unitOptOptions, row.unitOpt);
      },
      // 采购状态字典翻译
      purchaseStatusFormat(row, column) {
        return this.selectDictLabel(this.purchaseStatusOptions, row.purchaseStatus);
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.queryParams = {};
        this.dateRange = [];
        this.resetForm("queryForm");
        this.handleQuery();
      },
    }
  };
</script>
<style type="text/css" scoped>
 .input_cas{
   width:400px;

 }
</style>
